import React,{Component,Fragment} from 'react'
import {Card} from 'antd'

import ReactEcharts from 'echarts-for-react'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

// import 'echarts/lib/component/title'
// import 'echarts/lib/component/markPoint'
//引入主题必须的
import echarts from 'echarts'
import theme from './../macarons.js'

echarts.registerTheme('macarons', theme);

export default class Bar extends Component {
    //柱状图一
    getOption = {
        title: {
            text: '用户骑行订单',
            textStyle: {
                color:'#cccccc'
            }
        },
        tooltip: {
            trigger:'axis',
            //只要在seriesdata里设置name,默认就有
            //formatter:'{b}<br/>{a}:{c}'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'订单量',
            data: [1000, 2000, 1500, 3000, 2000, 1200, 800],
            type: 'bar'
        }]
    }
    //柱状图二
    getOption2 = {
        title: {
            text: '用户骑行订单',
            textStyle: {
                color:'#cccccc'
            }
        },
        legend: {
            data: ['ofo', '摩拜','小蓝']
        },
        tooltip: {
            trigger:'axis',
            //折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
            //只要在seriesdata里设置name,默认就有
            //formatter:'{b}<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [2000, 3000, 5500, 7000, 8000, 12000, 20000],
                type: 'bar',
                name:'ofo'
            },{
                data: [1500, 3000, 4500, 6000, 8000, 10000, 15000],
                type: 'bar',
                name:'摩拜'
            },{
                data: [1000, 2000, 2500, 4000, 6000, 7000, 8000],
                type: 'bar',
                name:'小蓝'
            }
        ]
    }
    render(){
        return (
            <Fragment>
                <Card title="柱形图表之一">
                    <ReactEcharts 
                        option={this.getOption}
                        style={{height:500}}
                        theme="macarons"
                    />
                </Card>
                <Card title="柱形图表之二" style={{marginTop:10}}>
                    <ReactEcharts 
                        option={this.getOption2}
                        style={{height:500}}
                        theme="macarons"
                    />
                </Card>
            </Fragment>
        )
    }
}